<template>
    <!-- 瀑布流 -->
    <div class="newest_item" @click="toDetail(newestInfo)">
        <img :src="newestInfo.picurl" alt="" v-lazy="newestInfo.picurl">
        <div class="title">{{ newestInfo.title }}</div>
    </div>
</template>

<script>
export default {
    props:{
        newestInfo:{
            type:Object
        }
    },
    methods:{
        toDetail(e){
            // 跳转到详情页
            this.$router.push({
                path: '/detail',
                query: {
                    id: e.id,
                    cid: e.classid
                }
            })
        }
    }
}
</script>

<style lang="less">
.clearfix:after {
    content: "";
    display: block;
    line-height: 0;
    visibility: hidden;
    height: 0;
    clear: both;
}

.newest {
    padding: 0.2rem 0.2rem;
    padding-top: .3rem;
    .newest_item {
        width: 49%;
        float: left;
        padding: 0.15rem;
        border: .01rem solid white;
        border-radius: 0.2rem;
        border: 1px solid #eee;
        margin-bottom: 0.15rem;
        box-shadow: 0 0.03rem 0.08rem rgb(0 0 0 / 10%);
        img {
            width: 100%;
            height: 2.5rem;
            border-radius: 0.1rem;
            display: block;
            border: .005rem solid #eee;
        }

        .title {
            font-size: 0.3rem;
            padding: 0.2rem;
            /* 1.先强制一行内显示文本 */
            white-space: nowrap;
            /*默认 normal 是自动换行，nowrap是强制一行显示文本*/
            /* 2.超出的部分隐藏 */
            overflow: hidden;
            /* 3.文字用省略号替代超出的部分*/
            text-overflow: ellipsis;
        }

        &:nth-child(odd) {
            margin-right: 0.1rem;
        }
    }
}
</style>